<template>
  <div>
    <van-cell-group>
      <van-field label="姓名" placeholder="" :border="false"/>
      <van-field label="性别"  :value="name" placeholder="请输入用户名" :border="false" @click="onChange"/>
      <drawer ref="a">
        <div slot="drawer">
          <i-panel title="group-水果" slot="drawer">
            <i-checkbox-group :current="current" @change="handleFruitChange(event)">
              <i-checkbox v-for="f in fruit" :position="position" :key="f.id" :value="f.name">
              </i-checkbox>
            </i-checkbox-group>
          </i-panel>
        </div>
      </drawer>


    </van-cell-group>

  </div>
</template>

<script>
  import Drawer from "../../../components/common/drawer";
  export default {
    name: "index",
    components: {Drawer},
    data() {
      return {
        name: '',
        showRight1: false,
        fruit: [
          {id: 1, name: '香蕉'},
          {id: 2, name: '苹果'},
          {id: 3, name: '西瓜'},
          {id: 4, name: '葡萄'}
        ],
        current: ['苹果', '葡萄'],
        position: 'left'
      }
    },
    methods: {
      onChange(event) {
        this.$refs.a.toggleRight1();
        console.log(event.mp.detail)
      },
      onClose(event) {
        console.log(event.mp.detail);
      },
      onSelect(event) {
        console.log(event.mp.detail);
      },
      handleFruitChange(event) {
        const index = this.current.indexOf(event.mp.detail.value);
        index === -1 ? this.current.push(event.mp.detail.value) : this.current.splice(index, 1);
        this.name = this.current;
      },
    }
  }
</script>

<style scoped>
  page {
    background-color: #FFFAF0;
  }
</style>
